<script lang="ts" setup>
import { ref } from 'vue';

import axios from 'axios';

const data = ref([]);
const columns = ref([]);
const loading = ref(true);

async function getData() {
  const res = await axios.get('/v1api/devices');
  data.value = res.data.data;

  if (data.value.length > 0) {
    columns.value = Object.keys(data.value[0]).map((key) => ({
      title: key,
      dataIndex: key,
      sorter: (a, b) => a[key].localeCompare(b[key]),
    }));
  }
  loading.value = false;
}

getData();
</script>

<template>
  <div class="p-4">
    <a-table
      :columns="columns"
      :row-key="(record) => record.NodeDesc"
      :data-source="data"
      :loading="loading"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          {{ text.first }} {{ text.last }}
        </template>
      </template>
    </a-table>
  </div>
</template>
